<template>
	<view class="login">
    
    <view class="login-icon">
      <view class="login-bg-icon"></view>
    </view>
    
    <view class="inputs">
      <view class="input-view">
        <m-input class="m-input" type="text" clearable placeholder="username" :minput.sync='username'></m-input>
      </view>
      
      <view class="input-view">
       <m-input class="m-input" type="password" clearable displayable placeholder="password" :minput.sync='password'></m-input>
      </view>
    </view>
    
    <view class="buttons">
      <view class="button"> SIGN IN </view>
      <view class="tip"> you don't have an account? <text class="sign-up" @tap="gotoReg"> SiGN UP </text></view>
    </view>
    <!--
		<view class="reg"  @tap="goHome">进入</view>
    <view class="pw"  @tap="goPw">忘记密码</view>
    -->
	</view>
</template>

<script>
  import mInput from '@/components/m-input/m-input.vue'
  import mIcon from '@/components/m-icon/m-icon.vue'
	export default {
    components: {
      mInput,
      mIcon
    },
		data() {
			return {
				loading: false,
				disabled: true,
				username: '',
				password: '',
			};
		},
    methods: {
      
      gotoReg() {
        uni.navigateTo({
          url: '/pages/reg/reg'
        });
      },
      
      goHome() {
        uni.switchTab({
          url: '/pages/home/home'
        });
      },
      
      goPw() {
        uni.navigateTo({
          url: '/pages/forget-pw/forget-pw'
        });
      }
    }
	}
</script>

<style>
  
  .login {
    position: relative;
  }
  
  .login .login-icon {
    display: flex;
    flex:1;
    justify-content: center;
    align-items: center;
    padding-top:100rpx;
    height:560rpx;
  }
  
  .login .login-bg-icon {
    width:378rpx;
    height:560rpx;
    background-image: url('~@/static/img/sign_in_icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  
  .login .inputs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top:60rpx;
  }
  
  .login .input-view {
    width:500rpx;
    height:80rpx;
    line-height:80rpx;
    border-radius: 100rpx;
    background: #fff;
    padding:10rpx 20rpx;
    font-size:14px;
    margin:20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }  
  
  .login .buttons {
    font-size:12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top:40rpx;
  }
  
  .login .button {
    font-size:28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width:420rpx;
    height:100rpx;
    line-height:100rpx;
    color:#fff;
    border-radius: 80rpx;
    background: linear-gradient(left,#F5316F,#FF7B43 );
  }
  
  .login .tip {
    height:30px;
    line-height: 30px;
    font-size:12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#ccc;
  }



</style>
